<div class="base-layers d-grid gap-3 p-3 border-bottom border-secondary-subtle">
  <% @base_layers.each do |layer| %>
    <div class="position-relative">
      <div class="position-absolute top-0 start-0 bottom-0 end-0 z-0 bg-body-secondary" data-layer="<%= layer["layerId"] %>"></div>
      <input type="radio" class="btn-check" name="layer" id="map-ui-layer-<%= layer["layerId"] %>"></input>
      <label class="btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute p-0 h-100 w-100 overflow-hidden" for="map-ui-layer-<%= layer["layerId"] %>">
        <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
          <%= t "javascripts.map.base.#{layer['nameId']}" %>
        </span>
      </label>
    </div>
  <% end %>
</div>
<% if Settings.status != "api_offline" && Settings.status != "database_offline" %>
  <div class="overlay-layers p-3">
    <p class="text-body-secondary small mb-2"><%= t "javascripts.map.layers.overlays" %></p>
    <% @overlay_layers.each do |layer|
         options = { :data => layer, :class => "form-check" }
         options[:title] = t(".map_#{layer[:name]}_zoom_in_tooltip") if layer[:max_area] %>
      <%= tag.div(**options) do %>
        <label id="<%= "label-layers-#{layer[:name]}" %>" class="form-check-label">
          <input type="checkbox" class="form-check-input">
          <%= t "javascripts.map.layers.#{layer[:name]}" %>
        </label>
      <% end
    end %>
  </div>
<% end %>
